import React from 'react';
import { Tooltip } from 'antd';
import './XmpHomePage.less';
function XmpHomePage() {
  const showModal = () => {

  }

  return (
    <div className="Xmp-Home-page">
      <div className="Xmp-Home-page-header">
        <div className="Xmp-Home-page-header-logo">
          <img src = {require('../../image/home/logo.svg').default}  />
          <span className='Xmp-Home-page-header-logo-text'>有数投研</span>
        </div>
        <div className="Xmp-Home-page-header-avatar">
        <img src = {require('../../image/home/avatar.svg').default}  />
        <span className='Xmp-Home-page-header-avatar-text'>王分析师</span>
        </div>
      </div>
      <div className="Xmp-Home-page-body">
        <div className="Xmp-Home-page-body-title">
          有数投研，分析师的最佳搭档
        </div>
        <div className="Xmp-Home-page-body-cardwrapper">
          <div className="Xmp-Home-page-body-cardwrapper-card">
            <img className="Xmp-Home-page-body-cardwrapper-card-logo" src = {require('../../image/home/show.svg').default}  />
            <div className="Xmp-Home-page-body-cardwrapper-card-title">快速演示</div>
            <div className="Xmp-Home-page-body-cardwrapper-card-desc">快速搭建可视化报告，及时演示您的思路</div>
            <div className="Xmp-Home-page-body-cardwrapper-card-actions">
              <div className="Xmp-Home-page-body-cardwrapper-card-actions-filewrapper">
                <div className="Xmp-Home-page-body-cardwrapper-card-actions-filewrapper-file">
                  <img src = {require('../../image/home/file.svg').default}  />
                  <Tooltip title="慧度十年债券研究分析报告">
                    <span className="Xmp-Home-page-body-cardwrapper-card-actions-filewrapper-file-name">慧度十年债券研究分析报告</span>
                  </Tooltip>
                </div>
                <div className="Xmp-Home-page-body-cardwrapper-card-actions-filewrapper-file">
                  <img src = {require('../../image/home/file.svg').default}  />
                  <Tooltip title="慧度十年债券研究分析报告">
                    <span className="Xmp-Home-page-body-cardwrapper-card-actions-filewrapper-file-name">慧度十年债券研究分析报告</span>
                  </Tooltip>
                </div>
              </div>
              <div className="Xmp-Home-page-body-cardwrapper-card-actions-create" onClick = {showModal}>
                <img className="Xmp-Home-page-body-cardwrapper-card-actions-create-logo" src = {require('../../image/home/right_arrow.svg').default}  />
                <span className="Xmp-Home-page-body-cardwrapper-card-actions-create-text">
                快速演示
                </span>
              </div>
            </div>
          </div>
          <div className="Xmp-Home-page-body-cardwrapper-card">
            <img className="Xmp-Home-page-body-cardwrapper-card-logo" src = {require('../../image/home/create_report.svg').default}  />
            <div className="Xmp-Home-page-body-cardwrapper-card-title">创建报告</div>
            <div className="Xmp-Home-page-body-cardwrapper-card-desc">多人线上协同编辑，所见即所得</div>
            <div className="Xmp-Home-page-body-cardwrapper-card-actions">
              <div className="Xmp-Home-page-body-cardwrapper-card-actions-filewrapper">
                {/* <div className="Xmp-Home-page-body-cardwrapper-card-actions-filewrapper-file">
                  <img src = {require('../../image/home/file.svg').default}  />
                  <span className="Xmp-Home-page-body-cardwrapper-card-actions-filewrapper-file-name">十年债券</span>
                </div>
                <div className="Xmp-Home-page-body-cardwrapper-card-actions-file">
                  <img src = {require('../../image/home/file.svg').default}  />
                  <span className="Xmp-Home-page-body-cardwrapper-card-actions-filewrapper-file-name">十年债券快速演示快速演示</span>
                </div> */}
              </div>
              <div className="Xmp-Home-page-body-cardwrapper-card-actions-create">
              <img className="Xmp-Home-page-body-cardwrapper-card-actions-create-logo" src = {require('../../image/home/right_arrow.svg').default}  />
              <span className="Xmp-Home-page-body-cardwrapper-card-actions-create-text">
              快速创建
              </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="Xmp-Home-page-footer">
        <div className="Xmp-Home-page-footer-function">
            <img src={require('../../image/home/my_space.svg').default} alt="" />
            <div className="Xmp-Home-page-footer-function-textwrapper">
              <div className="Xmp-Home-page-footer-function-textwrapper-title">我的空间</div>
              <div className="Xmp-Home-page-footer-function-textwrapper-desc">你可创建和编辑报告</div>
            </div>
            <div className="Xmp-Home-page-footer-function-mask">点击进入</div>
        </div>
        <div className="Xmp-Home-page-footer-split"></div>
        <div className="Xmp-Home-page-footer-function">
            <img src={require('../../image/home/share_space.svg').default} alt="" />
            <div className="Xmp-Home-page-footer-function-textwrapper">
              <div className="Xmp-Home-page-footer-function-textwrapper-title">共享空间</div>
              <div className="Xmp-Home-page-footer-function-textwrapper-desc">关联你的任务在这里</div>
            </div>
            <div className="Xmp-Home-page-footer-function-mask">点击进入</div>
        </div>
        <div className="Xmp-Home-page-footer-split"></div>
        <div className="Xmp-Home-page-footer-function">
            <img src={require('../../image/home/visualization_chart.svg').default} alt="" />
            <div className="Xmp-Home-page-footer-function-textwrapper">
              <div className="Xmp-Home-page-footer-function-textwrapper-title">图表库</div>
              <div className="Xmp-Home-page-footer-function-textwrapper-desc">快速上传需要的图表</div>
            </div>
            <div className="Xmp-Home-page-footer-function-mask">点击进入</div>
        </div>
        <div className="Xmp-Home-page-footer-split"></div>
        <div className="Xmp-Home-page-footer-function">
            <img src={require('../../image/home/template.svg').default} alt="" />
            <div className="Xmp-Home-page-footer-function-textwrapper">
              <div className="Xmp-Home-page-footer-function-textwrapper-title">模板库</div>
              <div className="Xmp-Home-page-footer-function-textwrapper-desc">快速上传和查看模板</div>
            </div>
            <div className="Xmp-Home-page-footer-function-mask">点击进入</div>
        </div>
        <div className="Xmp-Home-page-footer-split"></div>
        <div className="Xmp-Home-page-footer-addmore">
            <img src={require('../../image/home/add_more.svg').default} alt="" />
            <div className="Xmp-Home-page-footer-addmore-mask">自定义入口</div>
        </div>
      </div>
    </div>
  );
}

export default XmpHomePage;
